<template>
  <div class="form-box">
    <el-form ref="ruleForm" :rules="rules" :model="itemInfo" label-width="auto">
      <el-form-item label="上传宣传图：" prop="imgUrl">
        <uploadSingImg
          :imgUrl="itemInfo.imgUrl"
          accept=".jpg,.jpeg,.png,.gif"
          :maxSize="10"
          @getImgUrl="getImgUrl"
        >
          <template v-slot:imgInfo>
            (建议上传图片尺寸 宽750px, 高不超过2000px, gif png
            jpg格式,尺寸最大10M)
          </template>
        </uploadSingImg>
      </el-form-item>
      <el-form-item label="设置宣传图功能：">
        <el-radio-group v-model="itemInfo.action">
          <el-radio
            v-for="item in actionType"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="itemInfo.action === 'LINK'" prop="link">
        <el-input
          style="width:30%"
          v-model="itemInfo.link"
          placeholder="请您输入跳转的链接"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
export default {
  props: ['itemInfo'],
  components: { uploadSingImg },
  data() {
    return {
      actionType: [
        { label: '无', value: '' },
        { label: '添加链接', value: 'LINK' },
        { label: '唤起入量弹窗', value: 'DIALOG' }
      ],
      rules: {
        imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
        link: [
          {
            required: true,
            pattern:
              '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
            message: '链接格式不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    /* 按钮图片 */
    getImgUrl(url) {
      this.itemInfo.imgUrl = url
      this.$refs['ruleForm'].validateField('imgUrl')
    },
    /* 收集数据 */
    collectData() {
      let flag = false
      const { action, link } = this.itemInfo
      this.itemInfo.link = action === 'LINK' ? link : ''
      this.$refs['ruleForm'].validate((valid) => {
        flag = valid ? true : false
      })
      return flag ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped></style>
